<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day15 上移下移</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        
        table {
            border: 1px solid red;
        }
        
        table tr th,
        td,
        button {
            margin: 2px;
            padding: 1px 10px;
        }
        
        table tbody tr:first-child td button:first-child,
        table tbody tr:last-child td button:last-child {
            cursor: not-allowed;
            border: 1px solid red;
        }
        
        .alert {
            width: 200px;
            height: 200px;
            line-height: 200px;
            margin: auto;
            text-align: center;
            border: 1px solid red;
            background-color: gainsboro;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="alert">删除成功</div>
    <table border="1" cellpadding="0" cellspacing="2">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>小黑</td>
                <td>20</td>
                <td>男</td>
                <td>计算机</td>
                <td>
                    <button onclick="up()">上移</button>
                    <button onclick="del()">删除</button>
                    <button onclick="down()">下移</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script src="/note/day15 上移下移/day15 上移下移.js"></script>

    <script>
        var tbody = document.querySelector('tbody');

        //本地存储 并 渲染
        // window.onload = function() {
            if (localStorage.arr) {
                arr = JSON.parse(localStorage.arr);
                render(arr);
            } 
        // }

        //渲染
        function render() {
            // console.log('arr:', arr);
            str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                    <tr>
                        <td>${i + 1 }</td>
                        <td>${arr[i].name}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].sex == '男' ? '男' : '女'}</td>
                        <td>${arr[i].hobby}</td>
                        <td>
                            <button onclick="move(${i}, 'up')" ${i == 0 ? 'disabled' : ''}>上移</button>
                            <button onclick="del(${arr[i].id})">删除</button>
                            <button onclick="move(${i}, 'down')" ${i == arr.length - 1 ? 'disabled': ''}>下移</button>
                        </td>
                    </tr>
                `;
            }
            tbody.innerHTML = str;
        }

        //删除
        function del(Id) {
            for (var i = 0; i < arr.length; i++) {
                console.log('Id:', Id);
                if (Id == arr[i].id) {
                    arr.splice(i, 1);
                }
            }

            //弹框
            document.getElementsByClassName('alert')[0].style.display = 'block';
            //本地存储 并 渲染
            localStorage.arr = JSON.stringify(arr);
            render(arr);

            setTimeout(function() {
                document.getElementsByClassName('alert')[0].style.display = 'none'
            }, 2000)
        }

        //上移、下移
        function move(i, type) {
            if (type == 'up') {
                if (i == 0) {
                    return;
                } else {
                    arr.splice(i - 1, 0, arr[i]);
                    arr.splice(i + 1, 1);
                }
            } else {
                if (i == arr.length - 1) {
                    return;
                } else {
                    arr.splice(i + 2, 0, arr[i]);
                    arr.splice(i, 1);
                }
            }
            localStorage.arr = JSON.stringify(arr);
            render(arr);
        }
    </script>
</body>

</html>